<template>
  <div class="border-line card">
    <header-title title="户型面积" @fullScreen="handleFullScreen"></header-title>
    <div class="card-content">
      <echarts-view ref="echarts" :options="option" height="320px"></echarts-view>
      <echarts-view ref="echarts2" :options="option2" height="320px"></echarts-view>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import rent from '../components/rent'
import axios from 'axios'

export default {
  props: {
    areaID: {
      type: Number,
      default: 0,
    },
  },
  components: {
    headerTitle,
    echartsView,
    rent,
  },
  data() {
    return {
      option: {},
      option2: {},
    }
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    areaID: function () {
      this.fetchData()
    },
  },
  methods: {
    fetchData() {
      const that = this
      const hx = axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_FWHX?RegionNO=${this.areaID}`)
      const mj = axios.get(`http://222.85.201.111:8026/api/statistics/Get_KB_FWmj?RegionNO=${this.areaID}`)
      Promise.all([hx, mj])
        .then((res) => {
          console.log(res)
          that.option = {
            color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
            tooltip: {
              trigger: 'item',
              confine: true,
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              bottom: 0,
              textStyle: {
                color: '#ffffff',
              },
            },
            series: [
              {
                name: '户型面积',
                type: 'pie',
                radius: ['35%', '50%'],
                avoidLabelOverlap: false,
                center: ['50%', '50%'],
                label: {
                  show: true,
                  position: 'outside',
                  color: '#ffffff',
                  formatter: '{b} : {c}套',
                },
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '套'
                  },
                },
                // emphasis: {
                //   itemStyle: {
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                //   },
                //   label: {
                //     show: true,
                //     color: '#fff',
                //     formatter: '{b}\n{c}㎡',
                //     fontWeight: 'bold'
                //   }
                // },
                labelLine: {
                  show: true,
                },
                data: res[0].data,
              },
            ],
          }
          that.option2 = {
            color: ['rgba(31, 164, 248, 1)', 'rgba(255, 228, 0, 1)', 'rgba(249, 90, 0, 1)', 'rgba(27, 199, 139, 1)'],
            tooltip: {
              trigger: 'item',
              confine: true,
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              bottom: 0,
              textStyle: {
                color: '#ffffff',
              },
            },
            series: [
              {
                name: '户型面积',
                type: 'pie',
                radius: ['35%', '50%'],
                avoidLabelOverlap: false,
                center: ['50%', '50%'],
                label: {
                  show: true,
                  position: 'outside',
                  color: '#ffffff',
                  formatter: '{b} : {c}套',
                },
                tooltip: {
                  valueFormatter: function (value) {
                    return value + '套'
                  },
                },
                // emphasis: {
                //   itemStyle: {
                //     shadowBlur: 10,
                //     shadowOffsetX: 0,
                //     shadowColor: 'rgba(0, 0, 0, 0.5)'
                //   },
                //   label: {
                //     show: true,
                //     color: '#fff',
                //     formatter: '{b}\n{c}㎡',
                //     fontWeight: 'bold'
                //   }
                // },
                labelLine: {
                  show: true,
                },
                data: res[1].data,
              },
            ],
          }
        })
        .catch(function (error) {
          this.$message.error(`网络请求错误，请稍后重试！错误信息：${error}`)
        })
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card {
  height: 400px;
  &-content {
    display: flex;
    margin-top: 10px;
  }
}
</style>
